<template>
  <a-tooltip
    :append-to="appendTo || textEllRef"
    :popup-visible="tooltipFlag"
    :position="position"
    :content-class="contentClass">
    <div
      ref="textEllRef"
      class="text-ell"
      :style="{ WebkitLineClamp: clamp }"
      :class="props.class"
      @click="$emit('click')"
      @mouseenter="onMouseenter"
      @mouseleave="onMouseleave">
      <slot>{{ content }}</slot>
    </div>
    <template #content>
      <cloud-scrollbar :max-height="maxScrollHeight">
        <slot v-if="customContent" name="content">{{ content }}</slot>
        <slot v-else>{{ content }} </slot>
      </cloud-scrollbar>
    </template>
  </a-tooltip>
</template>

<script setup lang="ts">
import { Tooltip as ATooltip } from '@arco-design/web-vue'
import type { ClassName } from '@arco-design/web-vue/es/_utils/types'

const textEllRef = ref()
export interface TextEllProps {
  content?: string | number
  clamp?: number
  class?: ClassName
  contentClass?: ClassName
  maxScrollHeight?: number
  offset?: number
  customContent?: boolean
  mouseLeaveFlag?: boolean
  position?:
    | 'top'
    | 'tl'
    | 'tr'
    | 'bottom'
    | 'bl'
    | 'br'
    | 'left'
    | 'lt'
    | 'lb'
    | 'right'
    | 'rt'
    | 'rb'
  appendTo?: string | HTMLElement
}

const props = withDefaults(defineProps<TextEllProps>(), {
  content: '',
  clamp: 1,
  class: ''
})

interface IEmit {
  (event: 'click'): void
}

defineEmits<IEmit>()

const tooltipFlag = ref(false)

function onMouseenter(event: MouseEvent) {
  // @ts-ignore
  tooltipFlag.value = event.target.scrollHeight > event.target.clientHeight
  // tooltipFlag.value = event.target.scrollWidth > event.target.offsetWidth
}

function onMouseleave() {
  tooltipFlag.value = false
}
</script>

<style lang="less" scoped>
.text-ell {
  width: 100%;
  flex: 1;
  padding: 0;
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  white-space: normal;
  line-height: 18px;
}
</style>
